<template>
    <div class="box">
        <h3>路由地址定义</h3>
        <p>一级路由默认地址</p>
        <pre>路由可以通过path 属性取值 /指定vue项目默认显示的路由组件</pre>
        <ul>
            <li>方式一：{ path:"/",component:DefaultPage }</li>
            <li>
                方式二：{ path:"/",redirect:"/default" } <br>
                重定向规则是当浏览器访问地址 / 时，会自动将地址切换为 /default <br>
                redirect 配置不能和 component 配置同时出现
            </li>
        </ul>
        <p>2.一级路由通配地址【404地址】</p>
        <ul>
            <li>vue-router@3 版本，path 取值 * 表示通配所有路由表中不存在的地址</li>
            <li>vue-router@4 版本，path 取值类似于KOA路由的通配正则表达式 <br>
            { path:"/:路径变量名(.*)*",component:NotFound } <br>
            /:路径变量名 为rest参数规则，路径参数变量名自定义 <br>
            (.*)* 为通配正则表达式，表示任意路径取值</li>
        </ul>
        <p>3.路有基础路径定义</p>
        <ul>
            <li>一级路由基础路径定义：在路由配置时routes中直接定义的地址导航组件 <br>
            path 取值必须是以 / 开头，但不限制层级 <br>
            正确取值 path:"/a" path:"/a/b" …… <br>
            错误取值 path:"a"
            </li>
            <li>
            多级路由的基础路由定义：在一级路由或其它路由配置中以属性children方式描述的导航组件 <br>
            多级路由定义，path取值可以分为 相对路径取值 和 绝对路径取值 两种方式 <br>
            </li>
           <ul>
            <li>绝对路径取值：path的取值只要是/ 方式开头均为绝对地址，浏览器地址的记录是从 # 开始，不影响路由层级</li>
            <RouterLink to="/ChildPageA">绝对路径的子路由组件A</RouterLink>
            <RouterLink to="/ChildPageB">绝对路径的子路由组件B</RouterLink>
           </ul>
        </ul>

        <RouterView></RouterView>
    </div>
</template>
<style lang="scss" scoped>
    .active{
    background-color: #ccc;
}

</style>